<template>
    <div class="info">
        <nav>
            <div class="container">
                <a class="info__logo" href="#">
                    <template v-if="logoPath">
                        <img :src="logoPath" height="48px;" alt="">
                    </template>
                    <template v-else>
                        <span v-if="corpName">{{corpName}}</span>
                    </template>
                </a>
                <div class="info__link">
                    <router-link :to="'/'+domain">首页</router-link>
                    <a href="javascript:void(0);" @click="gotoGoodList">全部货品</a>
                    <a class="active">企业信息</a>
                </div>
            </div>
        </nav>
        <section class="section-basic">
            <div class="container">
                <div class="section-title section-basic__title">
                    基本信息
                </div>
                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-card class="section-basic__content">
                            <div>
                                <p>{{pageData.introduction}}</p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </section>
    
        <section class="section-contact">
            <div class="container">
                <div class="section-title section-contact__title">
                    联系我们
                </div>
                <div class="section-contact__content">
                    <div class="section-contact__item">
                        <div class="section-contact__label">
                            <label>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>：</div>
                        <p :title="pageData.corpName?pageData.corpName:corpName">{{pageData.corpName?pageData.corpName:corpName}}</p>
                    </div>
                    <div v-if="pageData.corpAddress" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>公司地址</label>：</div>
                        <p :title="pageData.corpAddress">{{pageData.corpAddress}}</p>
                    </div>
                    <div v-if="pageData.warehouseAddress" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>仓库地址</label>：</div>
                        <p :title="pageData.warehouseAddress">{{pageData.warehouseAddress}}</p>
                    </div>
                    <div v-if="pageData.fixedLine" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>固&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>：</div>
                        <p>{{pageData.fixedLine}}</p>
                    </div>
                    <div v-if="pageData.faxLine" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>传&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;真</label>：</div>
                        <p>{{pageData.faxLine}}</p>
                    </div>
                    <div v-if="pageData.zipCode" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编</label>：</div>
                        <p>{{pageData.zipCode}}</p>
                    </div>
                    <div v-if="pageData.corpUrl" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>企业官网</label>：</div>
                        <p>{{pageData.corpUrl}}</p>
                    </div>
                    <div v-if="pageData.contacts" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>联&nbsp;&nbsp;系&nbsp;&nbsp;人</label>：</div>
                        <p>{{pageData.contacts}}</p>
                    </div>
                    <div v-if="pageData.phone" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机</label>：</div>
                        <p>{{pageData.phone}}</p>
                    </div>
                    <div v-if="pageData.qqim" class="section-contact__item">
                        <div class="section-contact__label">
                            <label>Q&nbsp;&nbsp;&nbsp;&nbsp;Q&nbsp;&nbsp;&nbsp;&nbsp;</label>：</div>
                        <p>{{pageData.qqim}}</p>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <br/>
        </footer>
    </div>
</template>

<script>
import service from '../../service/Service'
import { Card, Row, Col } from 'element-ui'
import { mapState } from 'vuex'
export default {
    middleware: 'domain',
    components: {
        'el-card': Card,
        'el-row': Row,
        'el-col': Col,
    },
    async asyncData (context) {
        let { data } = await service.getCorpInfo(context.store.state.domain, context)
        return {
            pageData: data.result,
        }
    },
    computed: {
        ...mapState(['logoPath', 'corpName', 'domain']),
    },
    methods: {
        gotoGoodList () {
            this.$router.push({
                name: 'domain-goods-listAll',
                query: {
                    categoryId: -1,
                    categoryName: '全部分类',
                },
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.info {
    nav {
        height: 90px;
        line-height: 90px;
        box-shadow: 0px 0px 10px rgba(229, 229, 229, 1);
    }
    .info__link {
        float: right;
    }
    .info__link a {
        margin-left: 50px;
        color: #444;
        text-decoration: none;
        font-size: 14px;
    }
    .info__link a.active {
        color: #00a2ff;
    }
    .info__logo {
        span {
            display: inline-block;
            margin-top: 4px;
            color: #666 !important;
            font-size: 28px;
            letter-spacing: 2px;
        }
        img {
            vertical-align: middle;
        }
    }
    .container {
        width: 1170px;
        margin: 0 auto;
    }
}

section {
    height: 400px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    .section-title {
        text-align: center;
        font-size: 16px;
        padding: 25px 0 10px;
    }
}

@media screen and (min-width: 1600px) {
    section {
        background-size: 100% auto;
    }
}

.section-basic {
    background-image: url('~assets/images/basic_bg.jpg');
    .section-basic__title {
        color: #fff;
        position: relative;
        &::after {
            content: ' ';
            height: 1px;
            width: 40px;
            background-color: #ddd;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -20px;
        }
    }
    .section-basic__content {
        overflow: hidden;
        margin-top: 60px;
        height: 180px;
        border-radius: 0;
        font-size: 14px;
        color: #333;
        padding: 25px;
        >div {
            height: 160px;
            overflow: auto;
            p {
                padding: 10px 40px;
                height: 100%
            }
        }
    }
}

.section-contact {
    background-image: url('~assets/images/contact_bg.png');
    .section-contact__title {
        color: #333;
        position: relative;
        margin-bottom: 30px;
        &::after {
            content: ' ';
            height: 1px;
            width: 40px;
            background-color: #ddd;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -20px;
        }
    }
    .section-contact__content {
        width: 570px;
        margin: 0 auto;
    }
    .section-contact__item {
        color: #999;
        font-size: 13px;
        .section-contact__label {
            display: inline-block;
        }
        label {
            color: #999;
            width: 60px;
        }
        p {
            margin: 0 0 10px;
            margin-bottom: 7px;
            display: inline-block;
            color: #333;
            width: 400px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: 15px;
            vertical-align: top;
        }
    }
}

footer {
    text-align: center;
    line-height: 30px;
    margin: 30px 0 50px;
    color: #666;
}
</style>